<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- | 叫做管道符 -->
        <!-- {{ num | filternum }} -->
        <hr>
        {{ computednum }}
        <hr>
        {{ num1 }}
        <hr>
        <button @click="addnum">按钮</button>
    </div>
</body>
<script>
    new Vue({
        el: '#app',
        data: {
            num: 10,
            num1: 1
        },
        methods: {
            addnum() {
                this.num1++
            }
        },
        // // 在filters中注册过滤器
        // // 过滤器只要页面变化了  就会触发
        // filters: {
        //     filternum(data) {
        //         console.log(data, '过滤器触发了')
        //         // 在使用了过滤器以后
        //         // 我们需要输出一个结果
        //         // return后面是什么  输出的结果就是什么
        //         return data * 2
        //     }
        // },
        computed: {
            // 计算属性
            // 计算属性只有自己依赖的对象变化了 才触发
            // 计算属性的缓存机制 惰性
            // 适合去运算比较复杂的数据
            computednum() {
                console.log('计算属性触发了')
                return this.num * this.num1
                // get () {
                //   console.log('计算属性触发了')
                //   return this.num + 1
                // },
                // set (val) {
                //   console.log(val)
                //   this.num = val - 5
                // },
            }
        }
    })
</script>

</html>